<template>
    <div>
      <div>命令：{{ command.func }}</div>
      <div v-if="command.alias">命令简写：[{{ command.alias.join(' ') }}]</div>
      <div v-if="command.desc">介绍：{{ command.desc }}</div>
      <template v-if="command.params && command.params.length > 0">
        <div>参数：</div>
        <ul style="margin-bottom: 0">
          <li v-for="(param, index) in command.params" :key="index">
            · {{ param.key }}
            {{ param.required ? "必填" : "可选" }}
            {{ param.defaultValue ? `默认：${param.defaultValue}` : "" }}
            {{ param.desc }}
          </li>
        </ul>
      </template>
      <template v-if="command.options?.length > 0">
        <div>选项：</div>
        <ul style="margin-bottom: 0">
          <li v-for="(option, index) in command.options" :key="index" style="margin-top: 5px;">
            · {{ getOptionKeyList(option).join(", ") }}
            {{ option.required ? "必填" : "可选" }}
            {{ option.defaultValue ? `默认：${option.defaultValue}` : "" }}
            {{ option.desc }}
          </li>
        </ul>
      </template>
    </div>
  </template>
  
<script setup lang="ts">
import { computed, onMounted, toRefs } from 'vue';
import CommandType = xpTerminal.CommandType;
import CommandOptionType = xpTerminal.CommandOptionType;

interface HelpBoxProps {
    command: CommandType;
}

const props = withDefaults(defineProps<HelpBoxProps>(), {});
const { command } = toRefs(props);

// /**
//  * 拼接用法字符串
//  */
const getOptionKeyList = computed(() => 
{
    return function (option: CommandOptionType) 
    {
        const list = [] as string[];
        // 优先用简写
        if (option.alias && option.alias.length > 0) 
        {
            list.push('-' + option.alias[0]);
        }
        list.push('--' + option.key);
        return list;
    };
});

</script>

<style scoped>
div {
    margin: 8px 0;
}
</style>
  